'use client';

import { useState } from 'react';
import SignOut from '../common/sign-out';
import UserInfo from '../common/user-info';
import { Button } from '../ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import AddressManage from './address-manage';

export default function AvatarWrapper({
  children,
}: { children: React.ReactNode }) {
  const [open, setOpen] = useState(false);
  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <div className="hover:cursor-pointer" onClick={() => setOpen(true)}>
          {children}
        </div>
      </PopoverTrigger>
      <PopoverContent className="p-1 flex flex-col items-center w-fit gap-2">
        <SignOut button={<Button variant="ghost">退出登录</Button>} />
        <UserInfo button={<Button variant="ghost">个人信息</Button>} />
        <AddressManage />
      </PopoverContent>
    </Popover>
  );
}
